<template>
	<Layout :showFooter="true">
		<template #title>发表评价</template>

		<InfoBlock standard customStyle="margin-top:48rpx;">
			<view class="inline-flex fill aic lawyer-info">
				<image mode="aspectFill" :src="detail.lawFirmLogo"></image>
				<text> {{detail.lawFirmName}}</text>
			</view>

			<view class="inline-flex fill aic lawyer-rate">
				<text>综合评价</text>
				<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5" size="34"
					v-model="formData.overallRating"></u-rate>
			</view>
		</InfoBlock>

		<InfoBlock standard header :headerRight="false" customStyle="margin-top:24rpx;">
			<template #header>请选择律师印象</template>
			<view class="lawyer-impress">
				<view v-for="item of tagList" :key="item.id" class="impress-tag" :class="{selected:item.selected}"
					@click.stop="item.selected = !item.selected">
					{{item.tagName}}
				</view>
			</view>
		</InfoBlock>

		<template #footer>
			<view class="common-footer">
				<u-button style="width:100%;" type="primary" size="large" :fill="true"
					@click.stop="tapSubmit">提交</u-button>
			</view>
		</template>
	</Layout>
	<LoginPopup></LoginPopup>
</template>

<script setup lang="ts" name="LawyerDetail">
	import Layout from '@/components/layout/layout.vue';
	import InfoBlock from '@/components/info-block/info-block.vue';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import type { AnyObj } from '@/types/global';
	import { getLawfirmTagList, getLawfirmDetail } from '@/apis/lawfirm';
	import { saveSpuComment } from '@/apis/common';
	import { isLogin } from '@/utils/auth';
	import { useAuthStore } from "@/stores";

	const authStore = useAuthStore();
	const tagList = ref<AnyObj[]>([]);
	const formData = ref<AnyObj>({
		lawFirmId: '',
		orderId: '',
		overallRating: 5,
		reviewTag: '',
	});
	const detail = ref<AnyObj>({});

	function tapSubmit() {
		if (!isLogin()) {
			authStore.show();
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			});
			return
		}


		formData.value.reviewTag = tagList.value.filter(item => item.selected).map(item => item.tagName).join(',');

		saveSpuComment({ ...formData.value }).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				});
				return;
			}
			uni.redirectTo({
				url: '/pages/comment-success/comment-success'
			});
		}).catch((res) => {
			uni.showToast({
				icon: 'none',
				title: res.msg ?? '请重新登录'
			});
		});
	}

	function loadData() {

		getLawfirmDetail(formData.value.lawFirmId).then((res) => {
			if (res.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: res.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			detail.value = res.data ?? {};
		});

		getLawfirmTagList().then((res) => {
			tagList.value = (res.rows ?? []).map((item) => {
				return { ...item, selected: false }
			});
		});
	}

	onLoad((options) => {
		options = options as { lawFirmId : string };
		formData.value.lawFirmId = options.lawFirmId;
		formData.value.orderId = options.lawFirmId;
		loadData();
	});
</script>

<style lang="scss">
	.lawyer-info {
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			background-color: wheat;
		}

		text {
			padding-left: 10rpx;
			color: #000000;
			font-size: 36rpx;
			font-weight: 600;
		}
	}

	.lawyer-rate {
		padding: 50rpx 0 26rpx 0;

		text {
			padding-right: 20rpx;
			color: #000000;
			font-size: 28rpx;
			font-weight: 400;
		}
	}

	.lawyer-impress {}
</style>